<template>
	<view class="container">
		<view>
			<mSearch :show="false" @search="search($event)"></mSearch>
		</view>
		<view class="uni-product-list">
			<view class="uni-product" v-for="(product,index) in goodses" :key="index" @click="navToDetailPage(product.id)">
				<view class="image-view">
					<image v-if="product.cover_info" class="uni-product-image" :src="product.cover_info.url"></image>
				</view>
				<view class="uni-product-title">{{product.name}}</view>
				<view class="uni-product-price">
					<text class="uni-product-price-original">￥{{product.price}}</text>
				</view>
			</view>
		</view>
		<view class="loadmore">
			<uni-load-more :status="loadMoreStatus"></uni-load-more>
		</view>
		<uni-fab
				:pattern="pattern"
				:content="content"
				horizontal="right"
				vertical="top"
				direction="vertical"
				@trigger="trigger"
		></uni-fab>
	</view>
</template>

<script>
	import { goods } from '../../common/config'
    import uniLoadMore from "@/components/uni-load-more"
    import mSearch from '@/components/mehaotian-search/mehaotian-search.vue';
    import uniFab from '@/components/uni-fab/uni-fab.vue';

    export default {
        components: {uniLoadMore,mSearch,uniFab},
		data() {
			return {
				//搜索框
                show: false,
				//悬浮按钮
                pattern: {
                    color: '#7A7E83',
                    backgroundColor: '#fff',
                    selectedColor: '#ff3333',
                    buttonColor:"#facd13"
                },
                content: [
                    {
                        iconPath: '/static/sort.png',
                        selectedIconPath: '/static/asc.png',
                        text: '价格升序',
                        active: false
                    },
                    {
                        iconPath: '/static/sort.png',
                        selectedIconPath: '/static/desc.png',
                        text: '价格降序',
                        active: false
                    }
                ],
				//商品列表
				goodses: [],
				//最底部的加载更多
				loadMoreStatus: 'more',
				//请求数据
				requestData:{
                    page:1,
                    title:'',
                    name:'',
                    sort:''
				}
			};
		},
        onPullDownRefresh() {
            //监听下拉刷新动作的执行方法，每次手动下拉刷新都会执行一次
            this.requestData.page = 1;
            this.loadMoreStatus = 'loading';
            this.goodses = [];
            this.loadData();
        },
		watch:{
		},
		onLoad() {
			this.loadData();
		},
		methods: {
            //排序
            trigger(e) {
                console.log(e);
				switch (e.index) {
					case 0:
					    this.content[1].active = false;
					    this.requestData.sort = 'asc';
					    break;
					case 1:
                        this.content[0].active = false;
                        this.requestData.sort = 'desc';
                        break;
                }
                this.content[e.index].active = !e.item.active;
				if ((!this.content[1].active) && (!this.content[0].active)) {
				    this.requestData.sort = '';
				}
                this.loadMoreStatus = 'loading';
                this.requestData.page = 1;
                this.goodses = [];
                this.loadData();
            },
            //搜索框
            search(e) {
                this.requestData.title = e;
				this.requestData.page = 1;
				this.goodses = [];
                this.loadData();
            },
			async loadData() {
			    let data = this.requestData;
				if (this.requestData.title === '')
				{
                    delete data.title
				}
                if (this.requestData.name === '')
                {
                    delete data.name
                }
                if (this.requestData.sort === '')
                {
                    delete data.sort
                }
				await this.$api.MyRequest(goods.GetGoods.url, goods.GetGoods.method, data)
                    .then(res => {
						if (res.data.length != 0) {
							this.requestData.page = res.current_page + 1;
                            this.goodses = this.goodses.concat(res.data);
                            this.loadMoreStatus = 'more'
						}
						else {
							this.loadMoreStatus = 'noMore'
						}
                    })
                    .catch(err => {
                    });
                uni.stopPullDownRefresh();//停止下拉刷新
			},
			//详情页
			navToDetailPage(e) {
				uni.navigateTo({
					url: '/pages/goods/goods?id='+e
				})
			},
		},
        //上拉加载，需要自己在page.json文件中配置"onReachBottomDistance"
        onReachBottom(){
            this.loadMoreStatus = 'loading';
            this.loadData()
        },
	}
</script>

<style lang="scss">
	/* product */
	page {
		background: #F8F8F8;
	}

	view {
		font-size: 28upx;
	}

	.uni-product-list {
		display: flex;
		width: 100%;
		flex-wrap: wrap;
		flex-direction: row;
	}

	.uni-product {
		padding: 20upx;
		display: flex;
		flex-direction: column;
	}

	.image-view {
		height: 330upx;
		width: 330upx;
		margin: 12upx 0;
	}

	.uni-product-image {
		height: 330upx;
		width: 330upx;
	}

	.uni-product-title {
		width: 300upx;
		word-break: break-all;
		display: -webkit-box;
		overflow: hidden;
		line-height: 1.5;
		text-overflow: ellipsis;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
	}

	.uni-product-price {
		margin-top: 10upx;
		font-size: 28upx;
		line-height: 1.5;
		position: relative;
	}

	.uni-product-price-original {
		color: #e80080;
	}

	.uni-product-tip {
		position: absolute;
		right: 10upx;
		background-color: #ff3333;
		color: #ffffff;
		padding: 0 10upx;
		border-radius: 5upx;
	}
	.loadmore{
		text-align: center;
		margin: 0 auto;
	}
</style>
